<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
      integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
      crossorigin=""
    ></script>
    <script src="leaflet.ChineseTmsProviders.js"></script>
  </head>
  <body>
    <div id="map" style="height: 800px; width: 800px"></div>
    <div>
      <button id="start">开始划线</button>
      <button id="end">结束划线</button>
      <button id="buttonThree">清除所有点位</button>
      <button id="buttonFour">清除路径</button>
    </div>
    <script src="./js/jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function () {
        /**
         * 智图地图内容
         */
        var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        })
        var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
          maxZoom: 18,
          minZoom: 5,
        })
        var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
          maxZoom: 18,
          minZoom: 5,
        })
        var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
          maxZoom: 18,
          minZoom: 5,
        })
        var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
          maxZoom: 18,
          minZoom: 5,
        })
        var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
          maxZoom: 18,
          minZoom: 5,
        })
        /**
         * 天地图内容
         */
        var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            maxZoom: 18,
            minZoom: 5,
          }),
          normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            maxZoom: 18,
            minZoom: 5,
          }),
          imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5,
          }),
          imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
            maxZoom: 18,
            minZoom: 5,
          })

        var normal = L.layerGroup([normalm, normala]),
          image = L.layerGroup([imgm, imga])
        /**
         * 谷歌
         */
        var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
            maxZoom: 18,
            minZoom: 5,
          }),
          satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5,
          })
        /**
         * 高德地图
         */
        var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        })
        var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
          maxZoom: 18,
          minZoom: 5,
        })
        var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 5,
        })
        var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga])

        var baseLayers = {
          智图地图: normalm1,
          智图多彩: normalm2,
          智图午夜蓝: normalm3,
          智图灰色: normalm4,
          智图暖色: normalm5,
          智图冷色: normalm6,
          天地图: normal,
          天地图影像: image,
          谷歌地图: normalMap,
          谷歌影像: satelliteMap,
          高德地图: Gaode,
          高德影像: Gaodimage,
        }

        var map = L.map('map', {
          center: [30.254906, 120.192644], //,
          zoom: 16,
          layers: [Gaode],
          zoomControl: false,
        })

        // L.control.layers(baseLayers, null).addTo(map);

        L.control
          .zoom({
            zoomInTitle: '放大',
            zoomOutTitle: '缩小',
          })
          .addTo(map)

        //####################一下为标记线路的代码#######################
        let allLinePoints = []
        let pointLayer = L.layerGroup() // 所有点位信息
        let polygon = null // 线路
        // 点击开始进行编辑
        $('#start').on('click', function () {
          // 将鼠标变为十字
          $('#map').css('cursor', 'crosshair')
          // 鼠标按下的时候隐藏鼠标
          map.on('mousedown', function () {
            $('#map').css('cursor', 'none') //鼠标按下时隐藏鼠标
          })
          // 拖拽地图的时候变成抓手
          map.on('drag', function () {
            $('#map').css('cursor', '-webkit-grabbing') //拖动电子地图时鼠标变为抓手
            $('#map').css('cursor', '-moz-grabbing')
          })
          // 鼠标抬起的时候恢复十字
          map.on('mouseup', function () {
            $('#map').css('cursor', 'crosshair')
          })
          // 绑定点击事件
          map.on('click', function (e) {
            console.log(e)
            allLinePoints.push([e.latlng.lat, e.latlng.lng])
            // 开始标记点位
            // 清除所有的线路防止重复标注
            pointLayer.clearLayers()
            renderSquareAndPoint(allLinePoints, pointLayer)
          })
          function renderSquareAndPoint(data, layer) {
            data.forEach((val, i) => {
              let pointIcon = L.divIcon({
                //角点的icon
                className: '',
                html:
                  `<div style="width: 20px;height: 20px;border-radius: 100%;background: #DD5246;text-align: center;line-height: 20px;">` +
                  `<span style="color: #fff;font-size: 8px;text-align: center;user-select:none">${
                    i + 1
                  }</span></div>`,
                iconSize: [20, 20],
                iconAnchor: [10, 10],
              })
              let marker = L.marker(val, {
                icon: pointIcon,
                draggable: true,
                id: i,
              })
              marker.on('drag', function (e) {
                // 进行拖拽
                allLinePoints.splice(i, 1, [e.latlng.lat, e.latlng.lng])
                renderLine(allLinePoints, layer)
              })
              marker.addTo(layer)
            })
            renderLine(data, layer)
          }
          // 开始划线 如果存在线条就清除重新绘制
          function renderLine(data, layer) {
            if (polygon) {
              polygon.removeFrom(layer)
            }
            polygon = L.polyline(
              // polyline（线路） polygon（多边形）
              data,
              {
                color: '#215b8e',
                fillColor: '#237bff',
                fillOpacity: 0.7,
              }
            )
            polygon.addTo(pointLayer)
            pointLayer.addTo(map)
          }
        })
      })
    </script>
  </body>
</html>
